<!DOCTYPE html>
<html>
    <head>
        <!--
            1.引入vue.js 文件
            2.new初始化vue实例
            3.data设施需要监听的属性值
            4.watch添加与监听属性同名的监听函数，参数为newname\oldname
            5.监听的属性使用v-model绑定至控件
        -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="cityname"><!--v-model实现双向数据绑定-->
        </div>
        <script>
            var vm = new Vue({
                el : '#app',
                data : {
                    cityname: 'shanghai'
                },
                watch : {
                    cityname (newname, oldname){
                        console.log(newname, oldname);
                    }
                }
            });
        </script>
    </body>
</html>